<template>
  <div>
    <el-header>
      <el-row class="nav" type="flex" align="middle">
        <!-- <el-col :span="4" class="box"
          ><img class="image" src="../assets/logo.png" @click="toHome()"
        /></el-col> -->
        <el-col :span="18">
          <el-menu
            class="el-menu-demo"
            mode="horizontal"
            active-text-color="#4F6E9D"
          >
            <el-menu-item index="/">
              <router-link to="/index"> 首页 </router-link>
            </el-menu-item>
           
            <el-menu-item index="all">
              <router-link
                :to="{ name: 'BooksList', params: { category: 'all' } }"
              >
                查看空置房屋
              </router-link>
            </el-menu-item>
            
            <el-menu-item index="to">
              <router-link
                :to="{ name: 'BooksList', params: { category: 'all' } }"
              >
                交水费
              </router-link>
            </el-menu-item>
            <el-menu-item index="fo">
              <router-link
                :to="{ name: 'BooksList', params: { category: 'all' } }"
              >
                交电费
              </router-link>
            </el-menu-item>
          </el-menu>
        </el-col>
       
        <el-col :span="1" :offset="2" class="box">
          <div
            v-if="
              this.$cookies.get('status') == 'unlogin' ||
              !this.$cookies.get('status')
            "
          >
            <el-button
              class="myButton el-icon-user"
              @click="toLogin()"
              circle
            ></el-button>
          </div>

          <div v-if="this.$cookies.get('status') == 'logined'">
            <el-dropdown>
              <el-avatar
                src="https://cube.elemecdn.com/0/88/03b0d39583f48206768a7534e55bcpng.png"
              ></el-avatar>
              <el-dropdown-menu slot="dropdown">
                <el-dropdown-item icon="el-icon-setting"
                  ><label @click="setting()">个人中心</label></el-dropdown-item
                >
                <el-dropdown-item icon="el-icon-circle-close"
                  ><label @click="exit()">退出登录</label></el-dropdown-item
                >
              </el-dropdown-menu>
            </el-dropdown>
          </div>
        </el-col>

       
      </el-row>
    </el-header>

    <el-main>
      <keep-alive>
        <router-view v-if="$route.meta.keepAlive"></router-view>
      </keep-alive>
      <router-view v-if="!$route.meta.keepAlive"></router-view>
    </el-main>

    <div
      class="footer"
      v-show="$route.name !== 'login' && $route.name !== 'register'"
    >
      <el-row class="border" type="flex">
        <el-col :span="24">
          <div class="contact">© 联系方式：2766324817@qq.com</div>
        </el-col>
      </el-row>
    </div>
  </div>
</template>

<script>
import axios from "axios";
import myapi from "../api";
export default {
  data() {
    return {
      input: "",
      isRouter: true,
      category: [],
    };
  },
  mounted() {
    axios.get(myapi.catogory.url).then((response) => {
      //用户名和密码将转为json传到后台接口
      let res = response.data; //用res承接返回后台的json文件(像使用数组那样)
      console.log(res.data);
      if (res.code == 32) {
        //显示登录结果
        this.category = res.data;
        this.input=res.data.name;
      } else {
        console.log("获取失败");
      }
    });
  },  
  methods: {
    toBooksListPage(c) {
      this.$router.push({
        params: { category: c },
      });
    },
    InputFocus() {},
    InputBlur() {},
    toSearch(input) {
       this.$router.push({name:'QuerdName',
            params:{name:input}
          })
    },
    toLogin() {
      this.$router.push({
        path: "/login",
      });
    },
    toHome() {
      this.$router.push({
        path: "/",
      });
    },
    setting() {
      this.$router.push({
        path: "/setting",
      });
    },
    exit() {
      	axios.post(myapi.logout.url)
        .then(res=>{
             this.$cookies.set("status", "unlogin");
                 location.reload();
          if(res.data.code==34)
          {
             
               	this.$message({
									showClose: true,
									message: '注销成功',
									type: 'success',
									center: true
								});

          }
        })
        .catch(res=>{
          	this.$message({
									showClose: true,
									message: '注销失败',
									type: 'success',
									center: true
								});
        })
     
    },
  },
};
</script>

<style>
.nav {
  width: 100%;
  top: 0;
  left: 0;
  right: 0;
  background-color: #ffffff;
  box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
  position: fixed;
  z-index: 999;
}

.el-menu.el-menu--horizontal {
  border-bottom: none;
}

.el-menu--horizontal .el-menu-item:not(.is-disabled):focus,
.el-menu--horizontal .el-menu-item:not(.is-disabled):hover {
  color: #4f6e9d;
}

.el-dropdown-menu__item:focus,
.el-dropdown-menu__item:not(.is-disabled):hover {
  color: #4f6e9d;
}

.box {
  background-color: #ffffff;
  text-align: center;
  color: #4f6e9d;
  font-size: 20px;
  cursor: pointer;
}

.el-menu-demo {
  margin-left: 30px;
}

.image {
  margin-left: 20px;
  width: 200px;
}

.el-icon-user {
  float: right;
}

/* 自定义类+内置类 */
.myInput1 input.el-input__inner:focus {
  border-color: #4f6e9d;
}

.myInput2 input.el-input__inner {
  border-radius: 25px;
}

.myButton:focus,
.myButton:hover {
  color: #ffffff;
  border-color: #7e9dca;
  background-color: #7e9dca;
}

.myButton:active {
  color: #ffffff;
  border-color: #7e9dca;
  outline: 0;
}

.el-avatar {
  cursor: pointer;
}

.footer {
  background-color: #4f6e9d;
}

.border {
  line-height: 100px;
  margin: 0 auto;
}

.contact {
  color: #ffffff;
  margin-left: 30px;
  text-align: center;
}
</style>

